<template>
  <div id="echarts" ref="chart" :style="{ width: width, height: height }"></div>
</template>

<script setup>
import { ref,  onMounted, defineProps } from 'vue';
import * as echarts from 'echarts';
const { width, height, options } = defineProps({
  width: {
    type: String,
    default: "100%", //默认属性
  },
  height: {
    type: String,
    default: "100%", //默认属性
  },
  options: {
    type: Object,
    default: () => ({   //对象默认属性为函数()=>({})
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      grid: {
        left: '2%',
        right: '2%',
      },
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }),
  }
})
const chart = ref()
onMounted(() => {
  generateChart()
})


// 生成图表
const generateChart = () => {
  let myChart = echarts.init(chart.value);
  myChart.setOption(options);
  // echarts响应式配置：宽高设置成百分比，window绑定resize方法，图表调用调用自带resize方法
  // resize事件会在窗口大小改变的任何时候触发,包括用户手动调整大小以及通过JS改变窗口宽高时。
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

</script>

<style lang='scss' scoped></style>